.logo {
    display: block;
    /* 块级元素margin才生效 */
    margin: 30px auto 10px;
    width: 90px;
    height: 90px;
    border-radius: 50%;
}

body {
    /* 左边黑色的背景，直接用的body的背景色 */
    background-color: #333;
}

.main-right {
    background-color: #fff;
}

.main-left a {
    color: white;
    padding: 8px 16px;
    /* 给a标签行内元素设置padding，发现视觉没生效（检查工具中确实有padding），
    要转元素类型为块级或行内块元素 */
    display: block;
    /* 需要换行效果，转为块级元素 */
    /* 边框一点立体效果用不同颜色的border top和bottom写 */
    border-top: solid 1px #5a5a5a;
    border-bottom: solid 1px #3a3a3a;
}

.main-left a:hover {
    text-decoration: none;
}
.main-left ul{
    background-color: #4a4a4a;
}
/* 栅格系统默认的列会有左右约15px的padding ,main-left和main-rigth都有paddding*/
.main-left{
    padding: 0;
}
.data-show{
    text-align: center;
    color: #999;
    border-top: solid 1px #999;
    /* 因为row有各负15px的左右外间距，所以.data-show的宽度是.main-right的总宽度 */
    /* .data-show也就是.row,设置。data-show就行 */
    margin: 0;
    padding: 10px 20px;
}
.data-show .num{
    font-size: 30px;
}
.data-show .show-item{
    /* 不能在hover里加 */
    border-radius: 10px;
    padding: 20px 0;
}
.data-show .show-item:hover{
    color: #fff;
    background-color: orangered;

}
.search-box .btn{
    margin-right: 10px;
}
.search-box input{
    width: 200px;
    display: inline-block;
    margin: 0 10px;
}
.other{
    background-color: #eee;
}
